<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 水平居中 -->
    <!-- 
    flex: justify-content: center align-item: center;
    绝对定位和负边距：top：50% margin-top: -25px;
    绝对定位和0: margin：auto position：absolute t/l/b/m： 0
    绝对定位和translate: transform: translate(-50%,-50%) position: absolute t/l: 50% 
    -->


    <!-- 两栏布局,一边固定,一边自适应 -->
    flex 0 1 30px flex: 1

    <!-- 三栏布局 -->
    <!-- 和上面差不多 -->

    <!-- 三角形 -->
    border-color: blue transparent transparent transparent;

    <!-- 扇形 -->
    <div class="selector"></div>
    <style>
        .selector {
            border-radius: 80px 0 0;
            width: 80px;
            height: 80px;
            background: #000;
        }
    </style>

    <!-- 宽高固定比 -->
    <!-- padding设置为百分比，是以元素的宽度乘以100%从而得到的padding值的。 -->

    <!-- 1px -->
    position: relative
    border: none
    transform: scaleY(0.5)


    <!-- 单，多行省略 -->
    单行
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    多行
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;

    <!-- 元素隐藏 -->
    1.opacity: 0
    2.visibility: 0
    3.overflow: hidden
    4.display: none
    5.z-index: -999
    6.transform: sacle(0,0)

    <!-- <img src="1.jpg" style="width:480px!important;”> 修改宽度 -->
    <!-- https://blog.csdn.net/u012138854/article/details/112801039 -->
    <img src="1.jpg" style="width:480px!important; max-width: 300px">
    <img src="1.jpg" style="width:480px!important; transform: scale(0.625, 1);">
    <img src="1.jpg" style="width:480px!important; width:300px!important;">

    document.getElementsByTagName("img")[0].setAttribute("style","width:300px!important;")


</body>

</html>